<template>
    <div class="Charts" ref="ChartsView"></div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue';
import dayjs from 'dayjs';
const ChartsView = ref();

const props = defineProps({
    CardData: Array
});


let Chart: any = null;


watch(() => props.CardData, (res: any) => {
    !Chart && (Chart = echarts.init(ChartsView.value));
    var xAxis: any = [];
    var series: any = [];
    for (let i = 0; i < res.length; i++) {
        const element = res[i];
        var date: string = dayjs(element.updateTime).format('MM-DD')
        xAxis.push(date);
        series.push(element.totalPoints);
    }
    let option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis
        },
        tooltip: {
            trigger: 'axis',
        },
        grid: { top: 20, left: 35, right: 20, height: 250 },
        yAxis: { type: 'value' },
        series: [{
            data: series,
            type: 'line',
            label: {
                show: true,
                position: 'top',
//                 formatter(params: any) {
//                     return `
// <div>${res[params.value.number].title}  </div>
//                     `
//                 }
            },
            stack: 'Total',
            areaStyle: {},
        }]
    };
    Chart.setOption(option);
}, { deep: true })


</script>
<style lang="less" scoped>

</style>